<template>
  <div v-loading="pageLoading">

  <div class="main">
    <div class="down">
      <el-button v-loading="pageLoading" class="state" v-if="hotSalelist.status==0" @click="change_statusu()" type="text">
        上架
      </el-button>
      <el-button v-loading="pageLoading" class="state" v-if="hotSalelist.status==1" @click="change_statusd()" type="text">
        下架
      </el-button>
    </div>
    <div class="main_list">
      <div class="hotsale mar">
        <div><span class="gra">特惠商品：</span><span class="blod">{{hotSalelist.spuName ? hotSalelist.spuName : '暂无数据'}}</span></div>
        <div v-if="hotSalelist.status==-1"><span class="gra">状态：</span><span class="blod">已下架</span></div>
        <div v-if="hotSalelist.status==0"><span class="gra">状态：</span><span class="blod">未上架</span></div>
        <div v-if="hotSalelist.status==1"><span class="gra">状态：</span><span class="blod">已上架</span></div>
        <div v-if="hotSalelist.status==null"><span class="gra">状态：</span><span class="blod">暂无数据</span></div>
      </div>
      <div class="price mar">
        <div><span class="gra">成本价：</span><span class="blod">{{hotSalelist.marketPriceFee ? hotSalelist.marketPriceFee/100 : '暂无数据'}}</span></div>
        <div><span class="gra">原价格：</span><span class="blod"></span>{{hotSalelist.priceFee ? hotSalelist.priceFee/100 : '暂无数据'}}</div>
        <div><span class="gra">特惠价格：</span><span class="blod"></span>{{hotSalelist.price ? hotSalelist.price/100 : '暂无数据'}}</div>
      </div>
      <div class="count mar">
        <div><span class="gra">剩余限量库存：</span><span class="blod">{{hotSalelist.spuStock ? hotSalelist.spuStock : '暂无数据'}}</span></div>
        <div><span class="gra">每人限购数量：</span><span class="blod">{{hotSalelist.quota ? hotSalelist.quota : '暂无数据' }}</span></div>
      </div>
      <div class="creatT mar">
        <div v-if="hotSalelist.startTime == null || hotSalelist.endTime == null"><span class="gra">活动期限：</span><span class="blod">暂无数据</span></div>
        <div v-else><span class="gra">活动期限：</span><span class="blod">{{hotSalelist.startTime}}--{{hotSalelist.endTime}}</span></div>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
  import * as api from '@/api/product/hot-sale'

  export default {
    data() {
      return {
        hotSaleId: null,
        pageLoading:true,
        hotSalelist:{
          spuName:'',
          status:'',
          marketPriceFee:'',
          price:'',
          priceFee:'',
          startTime:'',
          endTime:'',
          spuStock:'',
          quota:''
        }

      }
    },
    created() {
      console.log(this.$route.query)
      this.hotSaleId = this.$route.query.hotSaleId
    },
    mounted() {
      this.hotSaledetail()
    },
    methods: {
      // 修改状态
      change_statusu(){
        this.pageLoading = true
        api.change_status({
          status:1,
          hotSaleId:this.hotSaleId
        }).then(data =>{
          this.$message({
            message: '上架成功！',
            type: 'success',
            duration: 1000
          })
          this.$nextTick(function() {
            this.hotSalelist.status = 1
          })
          this.pageLoading = false
        })
      },
      change_statusd(){
        this.pageLoading = true
        api.change_status({
          status:-1,
          hotSaleId:this.hotSaleId
        }).then(data =>{
          this.$message({
            message: '已下架！',
            type: 'success',
            duration: 1000
          })
          this.$nextTick(function() {
            this.hotSalelist.status = -1
          })
          this.pageLoading = false
        })
      },
      hotSaledetail() {
        this.pageLoading = true
        api.hotSaledetail(this.hotSaleId).then(data => {
          this.hotSalelist = data
          console.log(this.hotSalelist)
          this.pageLoading = false
        })
      }

    }
  }
</script>

<style lang="scss" scoped>
  .main {
    margin: 50px 100px 0 50px;
    .down{
      margin-left: 90%;
      margin-bottom: 50px;
      .state{
        width: 120px;
        font-size: 16px;
        font-weight: bolder;
        border: 0.5px solid gray;
      }
    }
    .main_list{
      font-size: 16px;
      .mar{
        margin-bottom: 50px;
        display: flex;
        justify-content: space-between
      }
      .gra{
        color: gray;
      }
      .blod{
        font-weight: 400;
        font-size: 18px;
      }
    }
  }
</style>
